<template>
<div class="addgoods">
     <p>基础信息</p>
     <div class="baseInfor">
          <el-card class="box-card">
               <el-form :label-position="labelPosition" label-width="80px" :model="baseData" float='left' width='120px'>
                    <el-form-item label="商品名称" prop="goodsname" :rules="[{ required: true, message: '请输入商品名称'}]">
                      <el-input v-model="baseData.goodsname"></el-input>
                    </el-form-item>
                    <el-form-item label="返利周期" prop="goodsmoney" :rules="[{required:true,message:'请输入返利周期'}]">
                      <el-input v-model="baseData.goodsmoney"></el-input>
                    </el-form-item>
                </el-form>
                <ecpUpload title="上传或修改商品图片" v-model="baseData.photo" style="float:right;position:relative;right:0px;top:-140px"></ecpUpload>
          </el-card>
     </div>
     <p>规格</p>
     <div class="addInfor">
          <el-form :inline="true" :model="specificationData"  class="demo-form-inline">
              <el-form-item label="" prop="speci" :rules="[{required:true,message:'请输入规格名称'}]">
                <el-input v-model="specificationData.speci" placeholder="规格名称"></el-input>
              </el-form-item>
              <el-form-item label="" prop="price" :rules="[{required:true,message:'请输入价格'}]">
                <el-input v-model="specificationData.price" placeholder="价格"></el-input>
              </el-form-item>
              <el-form-item label="" prop="num" :rules="[{required:true,message:'请输入库存'}]">
                <el-input v-model="specificationData.num" placeholder="库存"></el-input>
              </el-form-item>
              <el-form-item label="" prop="persont" :rules="[{required:true,message:'请输入返利比例'}]">
                <el-input v-model="specificationData.persont" placeholder="返利比例"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button size="small">参与返利</el-button>
              </el-form-item>
              <el-form-item>
                <el-button size="small">可使用未到账返利</el-button>
              </el-form-item>
              <el-form-item>
                <img src="~/static/images/button_tool_default.png" alt="" @click="showDialog(index)">
              </el-form-item>
          </el-form>
          <el-button type="primary" icon="el-icon-plus" circle @click.native="add" size="mini"></el-button>
     </div>
     <p>商品描述</p>
     <div ref="editor" style="text-align:left;"></div>
     <p>服务</p>
     <div  class="service" style="margin-top: 20px">
          <el-checkbox v-model="checked5" label="酷夏来袭" border size="medium"></el-checkbox>
          <el-checkbox v-model="checked6" label="测试数据" border size="medium"></el-checkbox>
     </div>
     <p>选择分类</p>
     <div class="sort">
           <div>1.请选择平台分类</div>
           <el-select v-model="value4" clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
     </div>
     <div class="sort" style="margin-top:20px;">
           <div>2.请选择店铺分类</div>
           <el-select v-model="value4" clearable placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
     </div>
     <div class="confirm">
       <el-row>
          <el-button size="small">保存并上架</el-button>
          <el-button size="small">保存</el-button>
        </el-row>
     </div>
</div>
  
</template>
<script>
import EcpUpload from "~/components/ecpUpload";
if (process.browser) { var wangeditor = require("wangeditor");}//引入orwangedit
export default {
    components:{EcpUpload},
    data(){
      return {
        labelPosition: 'left',
        //基础信息
        baseData: {
          goodsname: '',
          goodsmoney: '',
          photo:''
        },
        //规格
        specificationData: {
          speci: '',
          price: '',
          num:'',
          persont:'',
        },
        //描述
        new_content: "sfnjjnkfesjks",
        //服务
        checked5: false,
        checked6: true,
        //分类
         options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }],
        value4: ''
      };
    },
      mounted() {//实例化富编辑器
          var editor = new wangeditor(this.$refs.editor);
          // 下面两个配置，使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用！！！
          editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
          // editor.customConfig.uploadImgServer = '/upload'  // 上传图片到服务器

          editor.customConfig.zIndex = 100;
          editor.customConfig.height = "500px";
          editor.customConfig.onchange = html => {
            this.new_content = html;
          };
          editor.create();
        },
}
</script>
<style lang="scss" scoped>
.addgoods{
  padding:30px  20px;
    p{
      margin-bottom: 30px;
      margin-top:20px;
      &::before{
        content:'';
        display:inline-block;
        width:8px;height:8px;background: #010101;
        border-radius: 50%;
        margin-right:10px;
      }
    } 
     .baseInfor{
        .box-card {
        width: 580px;
        height:200px;
        & /deep/{
          .el-input__inner{
            border-radius: 20px;
            height:30px;
            width:120px;
          }
        }
      }
 } 
      .addInfor{
        width: 95%;
        height:200px;
        background-color: #fff;
        padding:30px 20px ;
        & /deep/{
          .el-input__inner{
            border-radius: 20px;
            height:30px;
            width:120px;
          }
        }
 } 
 .service{
   padding-left:10px;
   width:400px;
   height:80px;
   background-color: #fff;
   & /deep/{
     .el-checkbox.is-bordered + .el-checkbox.is-bordered{
       margin-left: 20px ;
       margin-top:20px;
     }
   }
 }
 .sort{
   padding-left:10px;
   padding-top: 10px;
   padding-bottom: 20px;
   width:400px;
   height:90px;
   background-color: #fff;
   div{margin-bottom: 10px;}
 }
 .confirm{
   float:right;
   margin:0 20px 40px 0;
 }
}

</style>
